<template>
    <list-page
        :pager="pager"
        :showSelectSearch="false"
        :showSearch="false"
        placeholder="请输入物业名称"
        hideShadow
        :selectList="[20,30,50]"
        @searchByKey="searchByKey"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
        @selectionChange="selectionChange"
        @clearSearchKeywords="getListData({clientProviderName: '', current: 1})">
        <template slot="table">
            <el-table
                :data="billData"
                align="center"
                ref="multipleTable"
                 >
                <el-table-column label="序号" type="index" width="60" ></el-table-column>
                <el-table-column label="缴费日期" prop="deadline"></el-table-column>
                <el-table-column prop="paymentType" align="center" label="缴费类型">
                    <template slot-scope="scope">{{scope.row.paymentType | dict('charge_project_type')}}</template>
                </el-table-column>
                <el-table-column label="缴费方式" prop="paymentChannel" ></el-table-column>
                <el-table-column label="缴费金额（元）" prop="paymentPrice"></el-table-column>
            </el-table>
        </template>
    </list-page>
</template>

<script>
    import pager from '@/assets/vue-mixin/pager'
    import {mapState} from 'vuex'
    import {get} from "~/utils/dbl"
    import {getBill} from '../api/clientprovider.js'
    export default {
        name: "payment-record",
        props:['pid'],
        mixins: [pager],
        propertyName:['propertyName'],
        mounted(){
            this.getListData();
        },
        data(){
            return{
                searchForm:{},
                billData:[],
                params: {
                    current: 1,
                    size: 10,
                    propertyName: ''
                },
                // 选中的数据
                selectDataArr: [],
                // 分页
                pager: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                // 页面loading
                loading: false,
                totalSearchData: [
                    {
                        label: '缴费日期',
                        value: 'paymentTime',
                        type: 'daterange',
                        model: 'paymentTime',
                    }
                ],
                /*    searchDataFrom:{},*/
            }
        },
        methods:{
            // 数据请求
            getListData(params = {}) {
                this.loading = true
                let requestData = {...this.params, ...params}
                getBill(Object.assign(
                       requestData,
                    { clientProviderId: this.pid
                })).then(res => {
                    const { current, size, total, records } = res.data.data
                    this.billData = records
                    this.params = requestData
                    this.pager = {
                        total,
                        currentPage: current,
                        pageSize: size
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            searchReset() {
                // console.log("====searchReset")
                //清空选中的数据
                this.searchForm = {}
                //重新查询
                this.resetList()
            },
            searchByKey(val) {
                //获取输入的值
          /*      if(val){
                    this.searchForm.paymentChannel=val;
                }else {
                    delete this.searchForm.paymentChannel
                }
                if (this.searchDataFrom.paymentTime) {
                    let dateArr = this.searchDataFrom.paymentTime[0]
                    this.searchForm.paymentTime = dateArr + '_' + this.searchDataFrom.paymentTime[1]
                }*/
                this.getListData({propertyName: val, current: 1});
                this.resetList()
            },
            selectionChange(val) {
                this.selectDataArr = val;
            },
            // 修改单页数据条数
            changePageSize(size) {
                this.getListData({current:1, size})
            },
            // 翻页
            changeCurrentPage(current) {
                this.getListData({current})
            },
        }
    }
</script>


